<!--
 * @Author: 宋杰
 * @Date: 2021-01-16 15:50:55
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-16 22:39:06
 * @Description: 一家十一口(猜一字) 第一行左上 重写
-->
<template>
  <!-- <Card class="card-style"> -->
  <div class="divBox">
    <!-- 标签 -->
    <div class="titleBox">
      <div>各产品累计(户数、余额&投放)</div>
    </div>
    <div class="beijing1">
      <div id="middlelower" style="width:100%; height: 100%;"></div>
    </div>
  </div>
  <!-- </Card> -->
</template>

<script>
//import {} from '';
export default {
  name: "MiddleLower",
  data() {
    return {
      chart: null,
      dataA: [220, 182, 121, 334, 260, 300],
      dataB: [110, 192, 191, 204, 250, 230],
      dataC: [160, 142, 161, 134, 290, 100],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.draw();
  },
  //方法集合
  methods: {
    draw() {
      this.chart = this.$echarts.init(document.getElementById("middlelower"));
      this.chart.setOption({
        // 设置图表的标题
        title: {
          text: "各产品累计投放户数(人)300,0000.00   当前余额(万元)2000",
          x: "center",
          y: "15%",
          textAlign: "left",
          textStyle: {
            color: "#31A5DE",
            fontSize: 16,
          },
        },
        color: ["#c0eaff", "#1CD3F3", "#f44765"],
        tooltip: {},
        legend: {
          orient: "vertical", // 'vertical'
          x: "right",
        	y: "2%",
          itemWidth: 22,
          itemHeight: 12,
        	// icon: "pin",
        	align:"left",
        	data: ["累计投放户数", "金额","累计投放"],
        	textStyle:{
        		color:"#aaa",
        	}
        },
        grid: {
          bottom:'13%',
          height:'60%'
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: false,
            // splitLine: {
            //   color: "rgba(255, 255, 2555, 0.5)",
            // },
          },
          splitLine: {
            show: false,
          },
          nameTextStyle: {
            color: "rgba(250,250,250, 0.5)",
            fontWeight: "bold",
            align: "right",
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.5)",
            interval: 0,
            formatter: function(value) {
              return value.split("").join("\n");
            },
          },
          axisTick: {
            show: false,
          },
          name: "日期",
          nameLocation: "start",
          data: ["京东", "蚂蚁", "度小满", "小米", "滴滴", "自营"],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            splitLine: {
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            // lineStyle: {
            //   type: "dashed",
            //   color: "rgba(255, 255, 255, 0.5)",
            // },
          },
          nameTextStyle: {
            color: "rgba(250,250,250, 0.5)",
            fontWeight: "bold",
            align: "left",
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.5)",
          },
          name: "金额(万元)/人数",
          nameLocation: "end",
        }, // 直角坐标系 Y 轴
        series: [
          {
            name: "累计投放户数",
            type: "bar",
            emphasis: {
              itemStyle: {},
            },
            // label: {
            //   show: true,
            //   position: "top",
            // },
            barWidth: "20%", //柱图宽度
            data: this.dataA,
          },
          {
            name: "金额",
            type: "bar",
            emphasis: {
              itemStyle: {},
            },
            // label: {
            //   show: true,
            //   position: "top",
            // },
            barWidth: "20%", //柱图宽度
            data: this.dataB,
          },
          {
            name: "累计投放",
            type: "bar",
            emphasis: {
              itemStyle: {},
            },
            // label: {
            //   show: true,
            //   position: "top",
            // },
            barWidth: "20%", //柱图宽度
            data: this.dataC,
          },
        ],
      });
    },
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>
<style lang="scss" scoped>
.divBox {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  > :nth-child(2) {
    flex: 1;
    width: 100%;
  }
}
.titleBox {
  position: absolute;
  top: 0;
  left: 0;
  font-family: PingFangSC-Regular;
  font-size: 0.3rem;
  color: #75bdff;
  letter-spacing: 0.015rem;
  text-align: left;
  line-height: 0.5rem;
  height: 0.5rem;
  width: 100%;
  background: url("../../assets/heng2.png") no-repeat;
  background-size: 6rem 40%;
  background-position: left bottom;
  margin-bottom: 0.05rem;
}
.beijing1 {
  margin-top: 0.6rem;
  background: url("../../assets/img/yunying1.png") no-repeat;
  background-size: 100% 100%;
  > :nth-child(1) {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
